<template>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="user.ordernum"
          placeholder="订单号"
          name="ordernum"
          required
          :rules="[{ required: true, message: '请填写订单号' }]"
          label="订单号"
        />
        <van-field
          v-model="user.money"
          required
          label="差价金额"
          name="money"
          placeholder="差价金额"
          :rules="[{ required: true, message: '请填写差价金额' }]"
        />
        <van-field label="凭证截图" required
          name="file"
          :rules="[{ required: true, message: '请上传凭证截图' }]">
          <template #input>
            <van-uploader :after-read="afterRead" v-model="files" :readonly="true" :max-count="1"/>
          </template>
        </van-field>
        <van-field
            required
            v-model="user.remark"
            rows="3"
            autosize
            label="申请原因"
            type="textarea"
            placeholder="申请原因"
            :rules="[{ required: true, message: '请填写申请原因' }]"
            />
      </van-cell-group>
      
      <div style="margin: 20px 40px">
        <van-button block type="primary" native-type="submit" class="aui-bg-red">
          提交申请
        </van-button>
      </div>
    </van-form>
  </template>
  
  <script>
  import User from '../../service/user.js'
    export default {
      data () {
        return {
          user: {
            uid: '',
            ordernum: '',
            image: '',
            money: '',
            remark: ''
          },
          files: []
        }
      },
      mounted() {
        this.user.uid = this.$store.state.uid;
      
      },
        methods: {
          afterRead(file) {
            console.log(file)
            this.user.image = file.file;
          },
          onSubmit () {
            let param = new FormData() // 创建form对象
            for (var i in this.user) {
              param.append(i, this.user[i]) // 添加form表单中其他数据
            }
            User.fnAddFall(param).then(res => {
              if (res) {
                this.utils.fnMsg(res.msg);
                if (res.status) {
                  setTimeout(() => {
                    this.utils.fnOpenCommon(this, { name: "fall", query: { title: "订单差价", text: "申请差价" } });
                  }, 500)
                  
                }
              }
            })
          }
        }
      }
  
  </script>
  
  <style lang="scss">
      div.recommend {
        li {
          height: 50px;
          line-height: 50px;
          .input {
            border: 0;
            height: 50px;
            line-height: 50px;
            background-color: transparent!important;
          }
          .gender {
            -webkit-justify-content: flex-end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
          }
        }
        div.submit_btn {
          height: 50px;
          line-height: 50px;
        }
      }
  </style>
  